<template>
  <!-- action：指定上传文件的接口地址 -->
  <!-- show-file-list：是否展示已选择的文件列表 -->
  <!-- before-upload：用于指定文件上传之前，对文件的校验函数 -->
  <!-- http-request：指定自定义上传行为的函数 -->
  <el-upload
    class="avatar-uploader"
    action="#"
    :show-file-list="false"
    :before-upload="beforeAvatarUpload"
    :http-request="upload">
    <img v-if="imageUrl" :src="imageUrl" class="avatar">
    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    <el-progress v-if="isShow" type="circle" :percentage="percentage" class="progress"></el-progress>
  </el-upload>
</template>

<script>
// 导入 sdk 工具包
var COS = require('cos-js-sdk-v5');
// SECRETID 和 SECRETKEY 请登录 https://console.cloud.tencent.com/cam/capi 进行查看和管理
// 创建 cos 实例
var cos = new COS({
  SecretId: 'AKID8GLGyZ7WlyEQQkw02yu492iJsGRlcP2X',
  SecretKey: 'a7Vn1RuFQQadWOgu562FKJh4LRSPEsSz',
})

export default {
  props: {
    value: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      // 图片地址
      imageUrl: this.value,
      // 进度条百分比
      percentage: 0,
      // 进度条的显示与隐藏的数据
      isShow: false
    }
  },
  watch: {
    value(newVal) {
      this.imageUrl = newVal
    }
  },
  methods: {
    // 文件校验函数
    beforeAvatarUpload(file) {
      // return true 表示校验通过
      // return false 表示校验不通过
      // file 就是选择出来的文件
      // console.log(file);
      // 校验需求：上传的头像格式必须是 png 的图片，大小不能超过 2M
      const isPng = file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isPng) {
        this.$message.warning('头像必须是png格式')
      }
      if (!isLt2M) {
        this.$message.warning('头像大小不能超过2M')
      }

      return isPng && isLt2M
    },
    // 自定义上传
    upload(obj) {
      // 显示进度条
      this.isShow = true
      // 完成将图片上传到腾讯云的操作
      // console.log(obj);
      // 使用 cos 实例完成图片的上传
      cos.putObject({
        Bucket: 'gkh-1316654920', /* 填入您自己的存储桶，必须字段 */
        Region: 'ap-beijing',  /* 存储桶所在地域，例如ap-beijing，必须字段 */
        Key: obj.file.name,  /* 存储在桶里的对象键（例如1.jpg，a/b/test.txt），必须字段 */
        Body: obj.file, /* 必须，上传文件对象，可以是input[type="file"]标签选择本地文件后得到的file对象 */
        onProgress: (progressData) => { // 文件的上传进度
          // console.log(JSON.stringify(progressData));
          // console.log(progressData);
          this.percentage = progressData.percent * 100
        }
      }, (err, data) => {
        // 上传成功或者失败都会走该函数
        // 隐藏进度条
        this.isShow = false
        // data：上传成功之后，腾讯云返回的结果
        // console.log(data);
        // data.Location 腾讯云返回的图片地址
        this.imageUrl = `https:${data.Location}`
        this.$emit('input', this.imageUrl)
      })
    }
  }
}
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.progress {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background: #fff;
}
</style>